<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    
<meta charset="UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>


<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />

<meta name="theme-color" content="#f8f5ec" />
<meta name="msapplication-navbutton-color" content="#f8f5ec">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="#f8f5ec">



  <meta name="description" content="多选操作的实现"/>




  <meta name="keywords" content="html, jQuery, 八一" />



  <meta name="baidu-site-verification" content="HhUstaSjr0" />



  <meta name="google-site-verification" content="UA-102975942-1" />






  <link rel="alternate" href="/atom.xml" title="八一">




  <link rel="shortcut icon" type="image/x-icon" href="/favicon.ico?v=2.6.0" />



<link rel="canonical" href="https://bay1.top/2017/11/07/多选操作的实现/"/>


<link rel="stylesheet" type="text/css" href="/css/style.css?v=2.6.0" />
<link rel="stylesheet" type="text/css" href="/css/prettify.css" media="screen" />
<link rel="stylesheet" type="text/css" href="/css/sons-of-obsidian.css" media="screen" />



  <link rel="stylesheet" type="text/css" href="/lib/fancybox/jquery.fancybox.css" />




  
  <script id="baidu_analytics">
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?9a885cc9fb6cd7bcef579deb8efe8a70";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>



  <script id="google_analytics">
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-102975942-1', 'auto');
        ga('send', 'pageview');
  </script>










    <title> 多选操作的实现 - 八一 </title>
  </head>

  <body><div id="mobile-navbar" class="mobile-navbar">
  <div class="mobile-header-logo">
    <a href="/." class="logo">八一</a>
  </div>
  <div class="mobile-navbar-icon">
    <span></span>
    <span></span>
    <span></span>
  </div>
</div>

<nav id="mobile-menu" class="mobile-menu slideout-menu">
  <ul class="mobile-menu-list">
    
      <a href="/archives">
        <li class="mobile-menu-item">
          
          
            文章
          
        </li>
      </a>
    
      <a href="/tags">
        <li class="mobile-menu-item">
          
          
            标签
          
        </li>
      </a>
    
      <a href="/about">
        <li class="mobile-menu-item">
          
          
            关于/友链
          
        </li>
      </a>
    
      <a href="/search">
        <li class="mobile-menu-item">
          
          
            站内搜索
          
        </li>
      </a>
    
  </ul>
</nav>

    <div class="container" id="mobile-panel">
      <header id="header" class="header"><div class="logo-wrapper">
  <a href="/." class="logo">八一</a>
</div>

<nav class="site-navbar">
  
    <ul id="menu" class="menu">
      
        <li class="menu-item">
          <a class="menu-item-link" href="/archives">
            
            
              文章
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/tags">
            
            
              标签
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/about">
            
            
              关于/友链
            
          </a>
        </li>
      
        <li class="menu-item">
          <a class="menu-item-link" href="/search">
            
            
              站内搜索
            
          </a>
        </li>
      
    </ul>
  
</nav>

      </header>

      <main id="main" class="main">
        <div class="content-wrapper">
          <div id="content" class="content">
            
  
  <article class="post">
    <header class="post-header">
      <h1 class="post-title">
        
          多选操作的实现
        
      </h1>

      <div class="post-meta">
        <span class="post-time">
          2017-11-07
        </span>
        
        
        
      </div>
    </header>

    
    
  <div class="post-toc" id="post-toc">
    <h2 class="post-toc-title">文章目录</h2>
    <div class="post-toc-content">
      <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#动态css属性"><span class="toc-text">动态css属性</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#多选操作"><span class="toc-text">多选操作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#后记"><span class="toc-text">后记</span></a></li></ol>
    </div>
  </div>


    <div class="post-content">
      
        <p>最近写了一个工作室随机出人为某部门干活的小Demo <a href="https://github.com/bayi27/RandomWithWeight" target="_blank" rel="noopener">源码</a> <a id="more"></a><br>处理的过程中也学到了一个新技能:多选操作,主要是前端的实现<br>这里就简单记录一下<br>不过学长说我的代码耦合性太强,不宜于维护…….再加油吧</p>
<blockquote>
<p>首先是思路,构造思路往往比写代码更占据时间<br>我首先想到的是那种点击之后可以切换css属性的前端样式<br>然后就是切换的时候记录对应的所选ID,堆到数组并post给后端</p>
</blockquote>
<h2 id="动态css属性"><a href="#动态css属性" class="headerlink" title="动态css属性"></a>动态css属性</h2><blockquote>
<p>全部都是JQ在带节奏,强大啊</p>
</blockquote>
<p>css属性的改变就是在点击之后,JQ选择器固定标签,修改相应的属性<br>这里为了方便进行选择,我给每个button都赋予带有特征的id<br>然后使用JQ中的.attr获取相应的class内容<br>(具体的JQ的各种函数用法可以随意的搜索到)</p>
<figure class="highlight django"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml">...</span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">a</span> <span class="attr">id</span>=<span class="string">"select</span></span></span><span class="template-variable">&#123;&#123;name.id&#125;&#125;</span><span class="xml"><span class="tag"><span class="string">"</span> <span class="attr">onclick</span>=<span class="string">"changeSelect(</span></span></span><span class="template-variable">&#123;&#123; name.id &#125;&#125;</span><span class="xml"><span class="tag"><span class="string">)"</span> &gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"btn btn-info btn-xs "</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">i</span> <span class="attr">id</span>=<span class="string">"changeclass</span></span></span><span class="template-variable">&#123;&#123; name.id &#125;&#125;</span><span class="xml"><span class="tag"><span class="string">"</span> <span class="attr">class</span>=<span class="string">"glyphicon glyphicon-unchecked"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">button</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span></span><br><span class="line"><span class="xml">...</span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/javascripts/application.js"</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span> <span class="attr">async</span> <span class="attr">defer</span>&gt;</span><span class="undefined"></span></span></span><br><span class="line"><span class="xml">var iclass = $("#changeclass"+id).attr("class");</span></span><br><span class="line"><span class="xml">if (iclass=="glyphicon glyphicon-unchecked")&#123;</span></span><br><span class="line"><span class="xml">	$("#changeclass"+id).attr(&#123;class:"glyphicon glyphicon-record"&#125;);</span></span><br><span class="line"><span class="xml">		&#125;</span></span><br><span class="line"><span class="xml">else&#123;</span></span><br><span class="line"><span class="xml">	$("#changeclass"+id).attr(&#123;class:"glyphicon glyphicon-unchecked"&#125;);</span></span><br><span class="line"><span class="xml">&#125;</span></span><br><span class="line"><span class="xml"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span></span><br></pre></td></tr></table></figure>
<h2 id="多选操作"><a href="#多选操作" class="headerlink" title="多选操作"></a>多选操作</h2><blockquote>
<p>这里我加了一个提交名单的按钮,然后再js函数中用id=0区别(数据库中没有id为0的数据)<br>点击之后将数组传递给后端<br>然后每次unchecked的改变都记录在数组中</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">...</span><br><span class="line"><span class="tag">&lt;<span class="name">center</span>&gt;</span><span class="tag">&lt;<span class="name">a</span> <span class="attr">onclick</span>=<span class="string">"changeSelect(0)"</span>&gt;</span><span class="tag">&lt;<span class="name">button</span> <span class="attr">class</span>=<span class="string">"btn btn-info btn-md submitNameIds"</span>&gt;</span></span><br><span class="line">	<span class="tag">&lt;<span class="name">span</span>&gt;</span>提交名单<span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">button</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span><span class="tag">&lt;/<span class="name">center</span>&gt;</span></span><br><span class="line">...</span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">src</span>=<span class="string">"/javascripts/application.js"</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">charset</span>=<span class="string">"utf-8"</span> <span class="attr">async</span> <span class="attr">defer</span>&gt;</span><span class="undefined"></span></span><br><span class="line"><span class="undefined">nameIds=[];</span></span><br><span class="line"><span class="actionscript"><span class="function"><span class="keyword">function</span> <span class="title">changeSelect</span><span class="params">(id)</span> </span>&#123;</span></span><br><span class="line"><span class="actionscript">	<span class="keyword">if</span> (id==<span class="number">0</span>) &#123;</span></span><br><span class="line"><span class="actionscript">		<span class="keyword">if</span> (nameIds.length&gt;<span class="number">0</span>) &#123;</span></span><br><span class="line"><span class="actionscript">			parent.window.location=<span class="string">"select/"</span>+nameIds;</span></span><br><span class="line"><span class="undefined">		&#125;</span></span><br><span class="line"><span class="actionscript">		<span class="keyword">else</span>&#123;</span></span><br><span class="line"><span class="actionscript">			alert(<span class="string">"请选择"</span>);</span></span><br><span class="line"><span class="undefined">		&#125;</span></span><br><span class="line"><span class="undefined">	&#125;</span></span><br><span class="line"><span class="actionscript">	<span class="keyword">else</span>&#123;</span></span><br><span class="line"><span class="javascript">		<span class="keyword">var</span> iclass = $(<span class="string">"#changeclass"</span>+id).attr(<span class="string">"class"</span>);</span></span><br><span class="line"><span class="actionscript">		<span class="keyword">if</span> (iclass==<span class="string">"glyphicon glyphicon-unchecked"</span>)&#123;</span></span><br><span class="line"><span class="javascript">			$(<span class="string">"#changeclass"</span>+id).attr(&#123;<span class="attr">class</span>:<span class="string">"glyphicon glyphicon-record"</span>&#125;);</span></span><br><span class="line"><span class="undefined">			nameIds.push(id);</span></span><br><span class="line"><span class="undefined">		&#125;</span></span><br><span class="line"><span class="actionscript">		<span class="keyword">else</span>&#123;</span></span><br><span class="line"><span class="javascript">			$(<span class="string">"#changeclass"</span>+id).attr(&#123;<span class="attr">class</span>:<span class="string">"glyphicon glyphicon-unchecked"</span>&#125;);</span></span><br><span class="line"><span class="undefined">			nameIds.remove(id);</span></span><br><span class="line"><span class="undefined">		&#125;</span></span><br><span class="line"><span class="undefined">	&#125;</span></span><br><span class="line"><span class="undefined">&#125;</span></span><br><span class="line"><span class="undefined"></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></table></figure>
<p>至于取消选中的操作则是数组的删除固定元素<br>这里我找了一个网上的remove示例,直接加了进去</p>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">//定义数组删除元素</span><br><span class="line">Array.prototype.remove = function(val) &#123; </span><br><span class="line">	var index = this.indexOf(val); </span><br><span class="line">	if (index &gt; -1) &#123; </span><br><span class="line">		this.splice(index, 1); </span><br><span class="line">	&#125; </span><br><span class="line">&#125;;</span><br></pre></td></tr></table></figure>
<p><img src="https://s1.ax1x.com/2018/01/01/pSfSZq.gif" alt="效果"></p>
<h2 id="后记"><a href="#后记" class="headerlink" title="后记"></a>后记</h2><p>这里在实行的过程中,我是受到前面删除确认的影响<br>在多选操作里面也是用下面这样的操作,和长航学长找bug找了好久….</p>
<blockquote>
<p>由于在button属性里使用了onclick,而删除操作里,模态框的确是还有一个确定按钮,确实点击了两次<br>但是在多选操作里面再直接照搬使用,这里只有一个按钮,就出现了点击两次才会执行css动态执行的效果</p>
</blockquote>
<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">$(&apos;#clickConfirm&apos;).click(function () &#123;</span><br><span class="line">        parent.window.location=&quot;delete/&quot;+id;</span><br><span class="line">    &#125;);</span><br></pre></td></tr></table></figure>
<p>这里也证明了一次,onclick和$().click();都会各自捕捉到一次click操作<br>这是想起来以为大牛说的话:不求甚解是阻碍部分人进步的主要原因</p>
<blockquote>
<p>争取做一个Problem Solver而不是Language User吧</p>
</blockquote>

      
    </div>

    
      
      



      
      
    

    
      <footer class="post-footer">
        
          <div class="post-tags">
            
              <a href="/tags/html/">html</a>
            
              <a href="/tags/jQuery/">jQuery</a>
            
          </div>
        
        
        
  <nav class="post-nav">
    
      <a class="prev" href="/2017/11/20/LCTF2017学到的姿势/">
        <i class="iconfont icon-left"></i>
        <span class="prev-text nav-default">LCTF2017学到的姿势</span>
        <span class="prev-text nav-mobile">上一篇</span>
      </a>
    
    
      <a class="next" href="/2017/11/04/几种开发时安全验证的实现/">
        <span class="next-text nav-default">python开发时邮箱验证,短信验证,图片验证码的实现</span>
        <span class="prev-text nav-mobile">下一篇</span>
        <i class="iconfont icon-right"></i>
      </a>
    
  </nav>

      </footer>
    

  </article>


          </div>
          
  <div class="comments" id="comments">
      <div id="disqus_thread">
        <noscript>
          Please enable JavaScript to view the
          <a href="//disqus.com/?ref_noscript">comments powered by Disqus.</a>
        </noscript>
      </div> 
    </div>
  </div>


        </div>
      </main>

      <footer id="footer" class="footer">

  <div class="social-links">
    
      
        
          <a href="https://github.com/bay1" class="iconfont icon-github" title="github"></a>
        
      
    
      
        
          <a href="http://weibo.com/3190704711/profile?topnav=1&wvr=6&is_all=1" class="iconfont icon-weibo" title="weibo"></a>
        
      
    
      
    
      
    
      
    
    
    
  </div>


<div class="copyright">
  <span class="copyright-year">
    
    &copy; 
     
      2016 - 
    
    2018
    <span class="author">bay1</span>
  </span>
</div>
      </footer>

      <div class="back-to-top" id="back-to-top">
        <i class="iconfont icon-up"></i>
      </div>
    </div>

    
  
  <script type="text/javascript">
    var disqus_config = function () {
        this.page.url = 'https://bay1.top/2017/11/07/多选操作的实现/';
        this.page.identifier = '2017/11/07/多选操作的实现/';
        this.page.title = '多选操作的实现';
    };
    (function() {
    var d = document, s = d.createElement('script');

    s.src = '//https-blog-flywinky-top-1.disqus.com/embed.js';

    s.setAttribute('data-timestamp', +new Date());
    (d.head || d.body).appendChild(s);
    })();  
  </script>



    
  





  
    <script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>
  

  
    <script type="text/javascript" src="/lib/slideout/slideout.js"></script>
  

  
    <script type="text/javascript" src="/lib/fancybox/jquery.fancybox.pack.js"></script>
  


    <script type="text/javascript" src="/js/src/even.js?v=2.6.0"></script>
<script type="text/javascript" src="/js/src/bootstrap.js?v=2.6.0"></script>
<script src="/js/prettify.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('pre').addClass('prettyprint');
   prettyPrint();
 })
</script>
  </body>
</html>
